<template>
	<view class="count">
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="navbarRight acea-row row-middle">
				<view class="tabs">
					<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="e=>tabChange(e)" font-size="32" bar-width="32" bar-height="8" active-color="#1661FF" :bar-style="{borderRadius:'8rpx',background:'linear-gradient(90deg,#1661ff 0%, rgba(22,97,255,0.00) 100%);'}"></u-tabs>
				</view>
			</view>
		</u-navbar>
		<view v-if="tabCurrent == 0">
			<view class="part01 acea-row row-middle row-between">
				<view class="value line1">{{weekTitle}} {{common.getDate().year+'年'}}{{common.getDate().getJiaowuData(weekId)}}</view>
				<view class="filter acea-row row-middle">
					<text>筛选</text>
					<image src="../../static/images/student-filter.png" mode=""></image>
				</view>
				<u-dropdown :style="'z-index: '+dropdownZIndex+';'" ref="uDropdown" class="dropdown" @open="dropdownOpen" @close="dropdownClose">
					<u-dropdown-item>
						<view class="dropdown-content">
							<scroll-view scroll-y class="content">
								<!-- <view class="item acea-row row-column">
									<view class="title">班级(可多选)</view>
									<view class="checkbox acea-row">
										<view class="checkbox-item" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in checkboxList" :key="index" @click="checkboxHandle(item.id)">
											{{item.title}}
										</view>
									</view>
								</view>
								<view class="item acea-row row-column">
									<view class="title">剩余课时</view>
									<view class="inputView acea-row row-middle row-between">
										<u-input v-model="classTimeMin" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最短课时" input-align="center" :type="text" :border="false" />
										<text class="xian">-</text>
										<u-input v-model="classTimeMax" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最长课时" input-align="center" :type="text" :border="false" />
									</view>
								</view> -->
								<view class="item acea-row row-column">
									<view class="title">时间</view>
									<view class="checkbox acea-row">
										<view class="checkbox-item" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in reason" :key="index" @click="checkboxHandle1(item.id,2)">
											{{item.title}}
										</view>
									</view>
								</view>
								<!-- <view class="item acea-row row-column">
									<view class="title">到期时间</view>
									<view class="inputView acea-row row-middle row-between">
										<u-input v-model="timeMin" disabled @click="openPiceker('min')" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最短时间" input-align="center" :type="text" :border="false" />
										<text class="xian">-</text>
										<u-input v-model="timeMax" disabled @click="openPiceker('max')" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最长时间" input-align="center" :type="text" :border="false" />
									</view>
								</view> -->
							</scroll-view>
							<view class="footer acea-row row-middle">
								<view class="btn btn1" @click="reset">清空</view>
								<view class="btn btn2" @click="confirm">完成</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="part02" :style="'z-index: '+listZIndex+';'">
				<view class="title">核心数据</view>
				<view class="list acea-row row-between">
					<view class="item acea-row row-column">
						<view class="text1">在读学员</view>
						<view class="text2">{{jiaowu.student.count?jiaowu.student.count:'暂无'}}</view>
						<view class="text3 acea-row row-middle" v-if="jiaowu.student.weeks_from">
							<text>周环比</text>
							<text>{{jiaowu.student.weeks_from}}</text>
							<image src="../../static/images/count-up.png" mode="" v-if="jiaowu.student.weeks_from.replace('%','') > 0"></image>
							<image src="../../static/images/count-down.png" mode="" v-else></image>
						</view>
					</view>
					<view class="item acea-row row-column">
						<view class="text1">出勤率</view>
						<view class="text2">{{jiaowu.chuqin.chuqinlv?jiaowu.chuqin.chuqinlv:'暂无'}}</view>
						<view class="text3 acea-row row-middle" v-if="jiaowu.chuqin.weeks_from">
							<text>周环比</text>
							<text>{{jiaowu.chuqin.weeks_from}}</text>
							<image src="../../static/images/count-up.png" mode="" v-if="jiaowu.chuqin.weeks_from.replace('%','') > 0"></image>
							<image src="../../static/images/count-down.png" mode="" v-else></image>
						</view>
					</view>
					<view class="item acea-row row-column">
						<view class="text1">课时</view>
						<view class="text2">{{jiaowu.keshi.count?jiaowu.keshi.count:'暂无'}}</view>
						<view class="text3 acea-row row-middle" v-if="jiaowu.keshi.weeks_from">
							<text>周环比</text>
							<text>{{jiaowu.keshi.weeks_from}}</text>
							<image src="../../static/images/count-up.png" mode="" v-if="jiaowu.keshi.weeks_from.replace('%','') > 0"></image>
							<image src="../../static/images/count-down.png" mode="" v-else></image>
						</view>
					</view>
					<view class="item acea-row row-column">
						<view class="text1">续费待完成</view>
						<view class="text2">{{jiaowu.xufei.xufeilv?jiaowu.xufei.xufeilv:'暂无'}}</view>
						<view class="text3 acea-row row-middle" v-if="jiaowu.xufei.weeks_from">
							<text>周环比</text>
							<text>{{jiaowu.xufei.weeks_from}}</text>
							<image src="../../static/images/count-up.png" mode="" v-if="jiaowu.xufei.weeks_from.replace('%','') > 0"></image>
							<image src="../../static/images/count-down.png" mode="" v-else></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="part03" :style="'z-index: '+listZIndex+';'">
				<view class="header acea-row row-between">
					<view class="title">数据趋势</view>
				</view>
				<view class="charts-box" v-show="!showTimePicker">
				  <qiun-data-charts
					type="line"
					:chartData="chartData"
					background="none"
					:animation="false"
				  />
				</view>
			</view> -->
		</view>
		<view class="view2" v-else>
			<u-tabs :list="tabList2" :is-scroll="false" :current="tabCurrent2" @change="tabChange2" font-size="32" bar-width="32" bar-height="8" active-color="#1661FF" :bar-style="{borderRadius:'8rpx',background:'linear-gradient(90deg,#1661ff 0%, rgba(22,97,255,0.00) 100%);'}"></u-tabs>
			<view class="list">
				<view class="item acea-row row-column">
					<view class="title">课时统计</view>
					<view class="line acea-row row-between">
						<text>授课课时</text>
						<text>{{classData.shouquan_keshi}}</text>
					</view>
					<view class="line acea-row row-between">
						<text>学员消耗课时</text>
						<text>{{classData.student_keshi?classData.student_keshi:0}}</text>
					</view>
				</view>
				<view class="item acea-row row-column">
					<view class="title">学员到课人次</view>
					<view class="line acea-row row-between">
						<text>到课</text>
						<text>{{classData.daoke_count}}</text>
					</view>
					<view class="line acea-row row-between">
						<text>请假</text>
						<text>{{classData.qingjia_count}}</text>
					</view>
					<view class="line acea-row row-between">
						<text>未到</text>
						<text>{{classData.weidao_count}}</text>
					</view>
					<view class="line acea-row row-between">
						<text>迟到</text>
						<text>{{classData.chidao_count}}</text>
					</view>
					<!-- <view class="line acea-row row-between">
						<text>补课</text>
						<text>42</text>
					</view> -->
				</view>
			</view>
		</view>
		<u-picker mode="time" :start-year="common.getDate().year" :end-year="parseInt(common.getDate().year) + 1" v-model="showTimePicker" :params="timePickerParams" @confirm="timePickerConfirm"></u-picker>
		<view class="commonFooter2"></view>
	</view>
</template>

<script>
	const chartData = {
	  categories:["04-15","04-16","04-17","04-18","04-19","04-20","04-21"],
	  series:[
			{
				"name": "成交量A",
				"data": [35,8,25,37,4,20,50]
			},
		]
	}
	import common from '../../api/common.js'
	import request from '../../api/request.js'
	export default{
		data(){
			return{
				common,
				jiaowu:{
					student:{},
					chuqin:{},
					keshi:{},
					xufei:{}
				}, //教务数据
				classData:{}, // 课程数据
				weekTitle:'本周',
				weekId:1,
				tabCurrent:0,
				tabCurrent2:0,
				chartData,
				tabList:[{
					name: '教务数据'
				}, {
					name: '课程统计'
				}],
				tabList2:[{
					name: '今天'
				}, {
					name: '本周'
				},{
					name: '上周'
				}, {
					name: '本月'
				},{
					name: '上月'
				}],
				classTimeMin:"",
				classTimeMax:"",
				timeMin:'',
				timeMax:'',
				timeMod:'', // 此时时间选择的mod
				showTimePicker:false,
				checkboxList:[
				{id:1,title:'英语一班',isCheck:false},
				{id:2,title:'英语二班',isCheck:false},
				{id:3,title:'英语三班',isCheck:false},
				{id:4,title:'英语四班',isCheck:false},
				{id:5,title:'英语五班',isCheck:false},
				{id:6,title:'英语六班',isCheck:false},
				{id:7,title:'英语七班',isCheck:false}],
				reason:[{id:1,title:'本周',isCheck:true},
						{id:2,title:'上周',isCheck:false},
						{id:3,title:'本月',isCheck:false},
						{id:4,title:'上月',isCheck:false}],
				timePickerParams:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				dropdownZIndex:-1,
				canTabChange:true,
				listZIndex:100
			}
		},
		created() {
			this.getJiaowuData()
			this.getClassData()
		},
		mounted() {
			setTimeout(()=>{
				this.dropdownZIndex = 5
			},800)
		},
		methods:{
			getJiaowuData(){
				let data = {
					type:this.reason.find(e=>e.isCheck).id
				}
				request.go((e)=>{
					this.jiaowu = e.data
				},'/tongji/index',data,"POST")
			},
			getClassData(){
				let type = parseInt(this.tabCurrent2 + 1)
				let data = {
					type
				}
				request.go((e)=>{
					this.classData = e.data
				},"/tongji/kecheng",data,"POST")
			},
			tabChange(e){
				if(this.canTabChange){
					this.tabCurrent = e
				}
			},
			tabChange2(e){
				this.tabCurrent2 = e
				this.getClassData()
			},
			confirm(){
				this.getJiaowuData()
				this.weekTitle = this.reason.find(e=>e.isCheck).title
				this.weekId = this.reason.find(e=>e.isCheck).id
				this.$refs.uDropdown.close()
			},
			reset(){
				let checkboxList = this.checkboxList
				for(let i of checkboxList){
					i.isCheck = false
				}
				for(let i of this.reason){
					i.isCheck = false
				}
				this.classTimeMin=""
				this.classTimeMax=""
				this.timeMin=''
				this.timeMax=''
			},
			checkboxHandle1(id,type){
				let checkboxList = this.checkboxList
				let reason = this.reason
				let buke = this.buke
				switch(type){
					case 1:
						checkboxList.find(e=>e.id == id).isCheck = !checkboxList.find(e=>e.id == id).isCheck
					break;
					case 2:
						for(let i of reason){
							i.isCheck = false
						}
						reason.find(e=>e.id == id).isCheck = !reason.find(e=>e.id == id).isCheck
					break;
					case 3:
						for(let i of buke){
							i.isCheck = false
						}
						buke.find(e=>e.id == id).isCheck = !buke.find(e=>e.id == id).isCheck
					break;
				}
			},
			checkboxHandle(id){
				let checkboxList = this.checkboxList
				checkboxList.find(e=>e.id == id).isCheck = !checkboxList.find(e=>e.id == id).isCheck
			},
			openPiceker(mod){
				this.timeMod = mod
				this.showTimePicker = true
			},
			timePickerConfirm(e){
				let time = e.year + '-' + e.month + '-' + e.day
				console.log(time)
				if(this.timeMod === 'min'){
					this.timeMin = time
				}else{
					this.timeMax = time
				}
			},
			dropdownOpen(){
				this.listZIndex = ""
			},
			dropdownClose(){
				setTimeout(()=>{
					this.listZIndex = 100
				},400)
			}
		},
		watch:{
			tabCurrent(e){
				this.canTabChange = false
				setTimeout(()=>{
					this.canTabChange = true
				},800)
				if(e == 0){
					setTimeout(()=>{
						this.dropdownZIndex = 5
					},800)
				}else{
					this.dropdownZIndex = -1
				}
			}
		}
	}
</script>

<style scoped>
	.count{
		min-height: 100vh;
		background-color: #F7F8FA;
	}
	.count .navbarRight{
		width: 336rpx;
	}
	.count .navbarRight .tabs{
		flex: 1;
		z-index: 10;
		position: relative;
	}
	.count .part01{
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;
	}
	.count .part01 .value{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		flex: 1;
		z-index: 10;
		background-color: #FFFFFF;
	}
	.count .part01 .filter text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-right: 10rpx;
	}
	.count .part01 .filter image{
		width: 32rpx;
		height: 32rpx;
	}
	.count .part01 .dropdown{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.count .part01 .dropdown .dropdown-content{
		background-color: #FFFFFF;
	}
	.count .part01 .dropdown .dropdown-content .content{
		padding: 32rpx;
		box-sizing: border-box;
		max-height: 600rpx;
		/* overflow-y: auto; */
		overflow: hidden;
		margin-bottom: 32rpx;
	}
	.count .part01 .dropdown .dropdown-content .content .item{
		margin-bottom: 32rpx;
	}
	.count .part01 .dropdown .dropdown-content .content .item .title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.count .part01 .dropdown .dropdown-content .content .item .checkbox .checkbox-item{
		width: 218rpx;
		height: 64rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		margin-right: 16rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		margin-bottom: 16rpx;
	}
	.count .part01 .dropdown .dropdown-content .content .item .checkbox .checkbox-item.checkbox-item-active{
		color: #1661ff;
		background: #e6f2ff;
	}
	.count .part01 .dropdown .dropdown-content .content .item .checkbox .checkbox-item:nth-child(3n){
		margin-right: 0rpx;
	}
	.count .part01 .dropdown .dropdown-content .content .item .inputView{
		
	}
	.count .part01 .dropdown .dropdown-content .footer{
		border-top: 2rpx solid #ebedf0;
	}
	.count .part01 .dropdown .dropdown-content .footer .btn{
		width: 50%;
		height: 96rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: CENTER;
		line-height: 96rpx;
	}
	.count .part01 .dropdown .dropdown-content .footer .btn.btn1{
		color: #1f2329;
		background-color: #FFFFFF;
	}
	.count .part01 .dropdown .dropdown-content .footer .btn.btn2{
		color: #ffffff;
		background-color: #1661FF;
	}
	.count .part02{
		padding: 32rpx;
		margin: 0 auto 26rpx;
		position: relative;
	}
	.count .part02 .title{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
		margin-bottom: 28rpx;
	}
	.count .part02 .list .item{
		padding: 32rpx;
		background-color: #FFFFFF;
		width: 327rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
	}
	.count .part02 .list .item .text1{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
		margin-bottom: 16rpx;
	}
	.count .part02 .list .item .text2{
		font-size: 48rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 700;
		color: #000000;
		line-height: 68rpx;
		margin-bottom: 48rpx;
	}
	.count .part02 .list .item .text3{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 40rpx;
	}
	.count .part02 .list .item .text3 text:nth-child(1){
		margin-right: 24rpx;
		display: block;
	}
	.count .part02 .list .item .text3 text:nth-child(2){
		margin-right: 8rpx;
		display: block;
	}
	.count .part02 .list .item .text3 image{
		width: 32rpx;
		height: 32rpx;
	}
	.count .part03{
		padding: 32rpx 24rpx;
		background-color: #FFFFFF;
		position: relative;
	}
	.count .part03 .header .title{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
		margin-bottom: 24rpx;
	}
	.count .part03 .charts-box{
	  width: 100%;
	  height: 460rpx;
	}
	.count .view2{
		width: 686rpx;
		background-color: #FFFFFF;
		margin: 56rpx auto 0;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 32rpx 0;
	}
	.count .view2 .list .item .title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #c0c4cc;
		line-height: 40rpx;
		margin-bottom: 24rpx;
	}
	.count .view2 .list{
		padding: 0 32rpx;
	}
	.count .view2 .list .item{
		margin-top: 32rpx;
	}
	.count .view2 .list .item .line{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 700;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 32rpx;
	}
	.count .view2 .list .item .line:last-of-type{
		margin-bottom: 0;
	}
</style>
